<script setup lang='ts'>

//获取页面参数
import { ref } from 'vue'
import type { User } from '@/types/orderList'
import { getUserByChIdAPI, insertCommentAPI } from '@/services/docter/comment'
import { onLoad } from '@dcloudio/uni-app'

const query = defineProps<{
  chId: string
}>()
const user = ref<User>()
const getUserInfo = async () => {
  const res = await getUserByChIdAPI(query.chId)
  user.value = res.data
}

// 设置评分等级
onLoad(() => {
  getUserInfo()
})
const score = ref(5)
const changeScore: UniHelper.UniRateOnChange = (ev) => {
  console.log(ev.value)
}
const content = ref()
const insertComment = async () => {
  await insertCommentAPI({
    chId: query.chId,
    content: content.value,
    star: score.value,
    user: user.value,
  })
  await uni.showToast({ icon: 'success', title: '提交成功' })
  setTimeout(async () => {
    // await uni.redirectTo({ url: `/pages/my/my` })
    await uni.navigateBack()
  }, 400)
}
</script>
<template>
  <view class='page'>
    <!--医生信息-->
    <view class='userInfo'>
      <view class='picture'>
        <image :src='user?.picture'></image>
      </view>
      <view class='name'>{{ user?.userName }}</view>
      <view class='underline'>
        评价该工作者
      </view>
    </view>
    <view style='background: #d8d8d8;height: 10rpx'></view>
    <!--评价表格-->
    <view class='form'>
      <view class='score'>
        <text>专业技能-</text>
        <uni-rate active-color='#00c19d' v-model='score' @change='changeScore' />
      </view>
      <view class='introduction'>
        <textarea v-model='content' placeholder-style='textarea1'
                  placeholder='本次服务是否满足你的要求？说说您的心得'></textarea>
        <button @tap='insertComment' class='submit'>提交信息</button>
      </view>
    </view>
  </view>
</template>


<style scoped lang='scss'>
.page {
  .userInfo {
    text-align: center;
    padding: 30rpx 0;

    view {
      margin: 5rpx 0;
    }

    .picture {
      image {
        background-color: #00c19d;
        width: 200rpx;
        height: 200rpx;
        border-radius: 50%;
      }
    }

    .name {
      color: #00c19d;
      font-size: 28rpx;
    }

    .underline {
      color: #999;
      font-size: 26rpx;
      position: relative;

      &::after, &::before {
        position: absolute;
        width: 190rpx;
        height: 2rpx;
        background: #00c19d;
        content: '';
        top: 20rpx;
      }

      &::after {
        left: 80rpx;
      }

      &::before {
        right: 80rpx;
      }
    }
  }

  .form {
    margin: 12rpx 0;
    text-align: center;
    padding: 30rpx;

    .score {
      display: flex;
      justify-content: space-evenly;
    }

    .introduction {
      text-align: center;
      margin: 20rpx 0;

      textarea {
        margin: auto;
        padding: 20rpx;
        border: #00c19d 3rpx solid;
        border-radius: 15rpx;
        text-align: left;
        height: 500rpx;
        font-size: 28rpx;
      }
    }

    .submit {
      background: #00c19d;
      color: white;
      margin: 20rpx auto;
      border-radius: 15rpx;
    }
  }
}
</style>
